<script setup>
// 获取参数
import {useRoute} from "vue-router";
import {onMounted, ref} from "vue";
import myAxios from "../plugins/myAxios.ts";
import Qs from "qs";
import UserCardList from "../components/UserCardList.vue";

// 根据标签搜索用户
const route = useRoute();
const {tags} = route.query;

const userList = ref([]);

onMounted(async () => {
  // 使用axios给后台发送请求
  const userDataList = await myAxios.get('/user/search/tags', {
    params: {
      tagNameList: tags
    },
    paramsSerializer: function(params) {
      return Qs.stringify(params, { arrayFormat: 'repeat' })
    }
  }).then(function (response) {
    console.log("/user/search/tags success", response);
    return response?.data;
  }).catch(function (error) {
    console.error("/user/search/tags error", error);
  })

  console.log(userDataList)
  if (userDataList) {
    userDataList.forEach(user => {
      if(user.userTags){
        user.userTags = JSON.parse(user.userTags)
      }
    })
  }
  userList.value = userDataList;
})


/*const mockUser = {
  id: 123,
  userAccount: 'zhangyb',
  userName: '张永波',
  userPhone: '13488111463',
  gender: '男',
  profile: '帅的一笔',
  tags: ['java', '乒乒球', 'LOL'],
  avatarUrl: 'https://pic.imeitou.com/uploads/allimg/211029/3-2110291A345R6.jpg',
};*/

</script>

<template>
  <UserCardList :user-list="userList"/>
</template>

<style scoped>

</style>